<template>
	<view class="stepsGroup">
		<view class="steps">
			<view v-for="item in 3" :key="item" class="group" :class="steps >= item ?'active':''">
				<view class="line left" v-if="item > 1"></view>
				<view class="circle">
					{{item}}
				</view>
				<view class="line right" v-if="item < 3"></view>
			</view>
		</view>
		<view class="steps text">
			<view>{{$t('基础信息')}}</view>
			<view>{{$t('商品规格')}}</view>
			<view>{{$t('商品确认')}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			steps: {
				type: Number,
				default () {
					return 1
				}
			}
		},
		data() {
			return {};
		},
		methods: {}
	}
</script>

<style lang="less" scoped>
	.stepsGroup {
		z-index: 2;
		position: relative;
		font-weight: 600;
		width: 100%;

		.steps {
			display: flex;
			justify-content: space-between;

			&.text {
				font-size: 26rpx;
				margin-top: 30rpx;
				font-weight: normal;
				color: #fff;
			}

			.group {
				display: flex;
				flex: 1;
				align-items: center;

				.circle {
					background-color: #00426C;
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					color: #fff;
					text-align: center;
					line-height: 70rpx;
					z-index: 2;
					position: relative;
				}

				.line {
					height: 30rpx;
					background-color: #00426C;
					margin: 0 -10rpx;
					flex: 1;
				}

				&.active {
					.circle {
						background: #fff;
						color: #00426C;
					}

					.line {
						background: #fff;
					}

				}
			}

			// 选择 active 类后面没有 active 类的元素
			.group.active:not(:has(+ .active)) {

				.line {
					&:last-child {
						background: #00426C;
					}
				}
			}

		}
	}
</style>